﻿@model IEnumerable<PlaceSystem.Entities.Picture>

@{
    ViewBag.Title = "Index";
}

@*<div class="hero-unit">
    <h2>Commenst</h2>

    @(Html.Kendo().Grid(Model)
    .Name("grid")
    .HtmlAttributes(new { style = "width: 750px;height:430px;" })
    .Columns(columns =>
    {
        columns.Template(e => { }).ClientTemplate(" ").Width(140).Title("Picture");
        columns.Bound(e => e.Place.Name).Width(400).Title("Place");
    })
    .ClientRowTemplate(
        "<tr>" +
            "<td class='photo'>" +
                     "<img src=" + Url + " alt='300x200' style='width: 200px;height: 150px;' />" +
            "</td>" +
            "<td class='details'>" +
                "<span class='title'>#: Place.Name #</span>" +
            "</td>" +
         "</tr>"
    )
    .ClientAltRowTemplate(
                "<tr>" +
                    "<td class='photo'>" +
                               "<img src=" + Url +" alt='300x200' style='width: 200px;height: 150px;' />"+
                    "</td>" +
                    "<td class='details'>" +
                        "<span class='title'>#: Place.Name #</span>" +
                    "</td>" +
                 "</tr>"
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("RowTemplate_Read", "Pictures"))
    )
    .Scrollable()
    )


    @section HeadContent {
        <style>
            .title {
                display: block;
                font-size: 1.6em;
            }

            .description {
                display: block;
                padding-top: 1.6em;
            }

            .employeeID {
                font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                font-size: 50px;
                font-weight: bold;
                color: #898989;
            }

            td.photo, .employeeID {
                text-align: center;
            }

            .k-grid-header .k-header {
                padding: 10px 20px;
            }

            .k-grid td {
                background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
                background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                padding: 20px;
            }

            .k-grid .k-alt td {
                background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
                background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
                background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
                background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
                background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            }
        </style>
    }
    </div>*@

<div class="hero-unit">
    <h2>Commenst</h2>

    @(Html
    .Kendo().Grid(Model)
    .Name("pctures-grid")
    .Columns(columns =>
            {
                columns.Template(@<text>
                    <img src="@item.Name" alt="place_image" style="width:250px; height: 250px;" />
                    </text>).Width(300);
                columns.Bound(p => p.Place.Name);

                columns.Template(@<text>
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id })
                    </text>);
                    columns.Template(@<text>
                        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                    </text>);

                    @*columns.Template(@<text>
                        @Html.ActionLink("Upload", "Upload", new { id = item.Id })
                            </text>);*@

                    })
                    .Sortable(sort =>
                    {
                    sort.AllowUnsort(false);
                    sort.SortMode(GridSortMode.SingleColumn);
                    })
                    .Pageable()
                    .Filterable()
                    .DataSource(dataSource => dataSource
                    .Server()
                    .Read(read => read.Action("Index", "Pictures"))
                    .PageSize(3)))
                </div>

    <div>
        @Html.ActionLink("Back to main administration page", "Index", "Main")
    </div>

    @*<h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Place.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Place.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }

    </table>*@
